<template>
	<view class="fee">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="车位缴费" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style=" background-color: #F2F3F5;">
			<view>

				<view style="margin-top: 20rpx; background-color: #fefefe; border-radius: 20rpx; padding: 0rpx 20rpx;
				box-shadow: 5rpx 5rpx 20rpx rgba(0,0,0,0.15);">
					<u-cell-group style="margin-top: 10rpx;" :border="false">
						<u-cell @click="mySchoole" icon="hhttps://resourse.cnlhjt.com/upload/20220825/651206a7d0688d69f6448bb5c016854c.png" :title="info.home">
						</u-cell>
						<u-cell @click="myYanglao" icon="https://resourse.cnlhjt.com/upload/20220825/4eeb13b0629adcc9e6f79c2218504b95.png"
							:title="'停车位 ' + info.park"></u-cell>
						<u-cell :border="false" @click="myKitchen" icon="https://resourse.cnlhjt.com/upload/20220825/fec72b8843bcdbf67edc72f6ce1a35f0.png"
							:title="'有效期 ' + info.start_time + ' 至 ' + info.end_time"></u-cell>
					</u-cell-group>
				</view>

				<view class="main-service uni-cell-90" style="padding: 10rpx 0rpx;">
					<view class="user-list">
						<view class="title">
							<view style="float: left; color: #333333; ">
								<text>费用详情</text>
							</view>

						</view>
						<u-line></u-line>
						<view style="padding-right: 20rpx; padding-bottom: 20rpx;" v-for="(item, index) in billList">
							<view class="d_view">
								<text class="l_title">{{item.time}}</text>
								<text class="d_title">{{item.title}}</text>
								<text class="d_content">￥{{item.price}}</text>
							</view>
							<view class="d_view" v-if="item.title1 !== ''">
								<text class="l_title"></text>
								<text class="d_title1">{{item.title1}}</text>
								<text class="d_content">￥{{item.price1}}</text>
							</view>
						</view>
					</view>
				</view>

				<u-button :customStyle="btnStyle" @click="intoBind">立即充值</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
					position: 'fixed',
					bottom: '40rpx'
				},
				info: {
					home: '龍舟一号院10号楼2单元401室',
					park: 'A-201',
					start_time: '2022-02-01',
					end_time: '永久',
					during: 0
				},
				billList: [{
						time: '2022-01-01至2022-02-01',
						title: '管理费',
						title1: '车位费',
						price: '80.00',
						price1: '70.00'
					},
					{
						time: '2021-12-01至2022-01-01',
						title: '管理费',
						title1: '车位费',
						price: '80.00',
						price1: '70.00'
					},
					{
						time: '2021-11-01至2021-12-01',
						title: '管理费',
						title1: '车位费',
						price: '80.00',
						price1: '70.00'
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.l_title {
		font-size: 28rpx;
		color: #363636;
		float: left;
		width: 50%;
	}

	.d_content {
		color: #393939;
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}

	.d_title {
		color: #999992;
		font-size: 28rpx;
		margin-left: 2%;
		float: left;
	}

	.d_title1 {
		color: #999992;
		font-size: 28rpx;
		margin-left: 52%;
		float: left;
	}
</style>
